<template>
	<view class="container">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in imageList" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 一排展示班级名称 -->
		<view class="class-row">
			<view @click="goToCourse(1,'格物班')">
				<image src="/static/img/logo1.png" mode="aspectFill"></image>
				<text>格物班</text>
			</view>
			<view @click="goToCourse(2,'致知班')">
				<image src="/static/img/logo1.png" mode="aspectFill"></image>
				<text>致知班</text>
			</view>
			<view @click="goToCourse(3,'正心班')">
				<image src="/static/img/logo1.png" mode="aspectFill"></image>
				<text>正心班</text>
			</view>
			<view @click="goToCourse(4,'诚意班')">
				<image src="/static/img/logo1.png" mode="aspectFill"></image>
				<text>诚意班</text>
			</view>
		</view>
		<!-- 每个班单独一排详细展示 -->
		<view class="class-detail-list">
			<view class="class-detail-item" @click="goToCourse(1,'格物班')">
				<image class="avatar" src="/static/img/logo2.jpeg" mode="aspectFill"></image>
				<view class="class-detail-info">
					<text class="class-detail-title">【每日国学大学生格物班】</text>
					<text class="student-count"> 16242人正在学</text>
				</view>
			</view>
			<view class="class-detail-item" @click="goToCourse(2,'致知班')">
				<image class="avatar" src="/static/img/logo2.jpeg" mode="aspectFill"></image>
				<view class="class-detail-info">
					<text class="class-detail-title">【每日国学大学生致知班】</text>
					<text class="student-count"> 8226人正在学</text>
				</view>
			</view>
			<view class="class-detail-item" @click="goToCourse(3,'正心班')">
				<image class="avatar" src="/static/img/logo2.jpeg" mode="aspectFill"></image>
				<view class="class-detail-info">
					<text class="class-detail-title">【每日国学大学生正心班】</text>
					<text class="student-count"> 18225人正在学</text>
				</view>
			</view>
			<view class="class-detail-item" @click="goToCourse(4,'诚意班')">
				<image class="avatar" src="/static/img/logo2.jpeg" mode="aspectFill"></image>
				<view class="class-detail-info">
					<text class="class-detail-title">【每日国学大学生诚意班】</text>
					<text class="student-count"> 6234人正在学</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imageList: [
					'/static/img/1.jpg',
					'/static/img/2.png',
					'/static/img/3.jpg',
					'/static/img/4.png'
				],
				classTexts: ['格物班', '致知班', '正心班', '诚意班'],
				classList: []
			};
		},
		mounted() {
			this.classList = this.classTexts.map(text => ({
				className: text,
				avatar: '/static/img/avatar.webp',
				studentCount: this.getRandomCount()
			}));
		},
		onLoad() {
			this.getCodeAndLogin();
		},
		methods: {
			getRandomCount() {
				return Math.floor(Math.random() * (50000 - 1000 + 1)) + 1000;
			},
			goToCourse(classId, className) {
				uni.navigateTo({
					url: `/pages/course/index?className=` + className + '&classId=' + classId
				});
			},
			getCodeAndLogin() {
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					console.log(userInfo)
					// 这里可以添加已有用户信息的处理逻辑
				} else {
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							if (loginRes.code) {
								const code = loginRes.code;
								uni.request({
									url: 'http://localhost:9090/user/login',
									method: 'GET',
									data: {
										code: code
									},
									success: (res) => {
										console.log(res.data.data)
										if (res.data.data.id) {
											uni.setStorageSync('userInfo', res.data.data);
										} else {
											uni.navigateTo({
												url: '/pages/register/index',
											});
										}
									},
									fail: (err) => {
										console.error('请求失败', err);
									}
								});
							} else {
								console.error('获取 code 失败：', loginRes.errMsg);
							}
						},
						fail: (err) => {
							console.error('登录失败：', err);
						}
					});
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
	}

	.swiper {
		width: 100%;
		height: 300px;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.class-row {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20px;
	}

	.class-row view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.class-row image {
		width: 80px;
		height: 80px;
	}

	.class-row text {
		margin-top: 5px;
	}

	.class-detail-list {
		margin-top: 20px;
	}

	.class-detail-item {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.class-detail-info {
		display: flex;
		flex-direction: column;
	}

	.class-detail-title {
		font-size: 16px;
		font-weight: bold;
	}

	.student-count {
		font-size: 14px;
		color: #888;
	}
</style>